<template>
  <div id="main">
    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">交易数据</span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-row style="text-align: right" v-model="form.data">
              <el-button size="small">导出数据</el-button>
              <el-button-group>
                <el-button size="small" @click="date(7)">最近7天</el-button>
                <el-button size="small" @click="date(30)">最近30天</el-button>
                <el-button size="small" @click="date(90)">最近90天</el-button>
              </el-button-group>
              <el-date-picker
                size="small"
                v-model="form.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData()"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-row>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <div>
          <el-table :data="tableData" border style="width: 800px;float: left;">
            <el-table-column prop="numVisitors" label="浏览人数" width="100">
            </el-table-column>
            <el-table-column prop="numPeople" label="下单人数" width="100">
            </el-table-column>
            <el-table-column prop="numOrder" width="100" label="订单数">
            </el-table-column>
            <el-table-column
              label="有效订单数"
              width="100"
              prop="numValidOrders"
            >
            </el-table-column>
            <el-table-column label="退款金额" width="100" prop="refundAmount">
            </el-table-column>
            <el-table-column prop="num" label="付款件数" width="100">
            </el-table-column>
            <el-table-column prop="money" label="付款金额" width="100">
            </el-table-column>
            <el-table-column label="平均单价" width="100">
              <template slot-scope="scope">
                {{ (scope.row.money / scope.row.num).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <div id="main1" style="width: 400px;height:400px;float: right;"></div>
        </div>
        <div id="main2" style="width: 100%;height:400px;margin-top:200px"></div>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">新老客户交易构成</span>
          <!-- <el-form ref="form" :model="form" label-width="80px"> -->
          <el-row style="text-align: right">
            <el-button size="small">导出数据</el-button>
            <el-button-group>
              <el-button size="small">本月</el-button>
              <el-button size="small">上月</el-button>
            </el-button-group>
          </el-row>
          <!-- </el-form>   -->
        </div>
      </el-header>
      <el-main>
        <!-- 统计页面：
            <el-select style="text-align: left" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
        <div
          id="main"
          style="width: 1000px;height:400px;margin-left: 35px"
        ></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      tableData: [],
      options: {},
      form: {}
    };
  },
  methods: {
    drawChart() {
      const myChart1 = echarts.init(document.getElementById("main2"));
      const option1 = {
        // title: {
        //     text: '折线图堆叠'
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "浏览次数",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "搜索引擎( UV )",
            type: "line",
            stack: "总量",
            data: [130, 132, 201, 334, 129, 133, 120]
          }
        ],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["浏览次数", "搜索引擎( UV )"]
        }
      };
      myChart1.setOption(option1);
    },
    async fetchData() {
      const categoryReportVo = {
        date1: this.form.date[0],
        date2: this.form.date[1]
      };

      this.tableData = [];
      const { data: res } = await this.$http.post(
        `vi/order/statis/findByOrderBrowse`,
        categoryReportVo
      );
      this.tableData.push(res.data.orderInfo);

      const myChart = echarts.init(document.getElementById("main1"));

      const browse = res.data.orderInfo.numVisitors;
      const numOrder = res.data.orderInfo.numOrder;
      const suctran = res.data.orderInfo.numValidOrders;

      const dataInfo = [
        {
          value: browse,
          name: "浏览"
        },
        {
          value: numOrder,
          name: "下单"
        },
        {
          value: suctran,
          name: "成功交易"
        }
      ];

      const option = {
        xAxis: {
          show: false
        },
        yAxis: {
          show: false,
          type: "category",
          inverse: true,
          min: 0,
          max: 6
        },
        series: [
          {
            name: "交易统计",
            type: "funnel",
            left: "10%",
            top: 0,
            // x2: 80,
            bottom: 30,
            height: "30%",
            width: "64%",
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 30,
            minSize: "0%",
            maxSize: "20%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside"
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: dataInfo
          },
          {
            type: "pictorialBar",
            symbol:
              "image://http://homework.mizholdings.com/kacha/kcsj/8351c72ed86c1a0c/.png",
            symbolSize: ["40%", 40],
            z: 1,
            symbolOffset: ["100%", -50],
            label: {
              show: true,
              position: "right",
              offset: [-10, -70],
              align: "center",
              backgroundColor: "",
              width: 10,
              height: 10,
              fontStyle: "Microsoft YaHei",
              formatter: function(d) {
                var ins = "{s|转换率}\n" + `{x|${d.data.percent}}`;
                return ins;
              },
              rich: {
                s: {
                  fontSize: 14,
                  color: "#545454",
                  padding: [5, 0, 12, 0]
                },
                x: {
                  fontSize: 16,
                  color: "#121212"
                }
              }
            },
            data: [
              {
                value: 140,
                percent: ((numOrder / browse) * 100).toFixed(2) + "%"
              },
              {
                value: 140,
                percent: ((suctran / numOrder) * 100).toFixed(2) + "%"
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    date(val) {
      const time = new Date(Date.now() - val * 24 * 60 * 60 * 1000);
      const time2 = new Date(Date.now());
      this.form.date = [];
      this.form.date.push(time);
      this.form.date.push(time2);
      this.fetchData();
      this.form = {};
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
